import { Button } from 'antd'
import React, { useEffect, useState } from 'react'
//引入主题颜色
import './index.css'

function SwitchTheme() {
  //切换主题颜色
   const [isTheme,setIsTheme]=useState(()=>{
      const saved = localStorage.getItem('theme')
      return saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme:dark)').matches)
   })

   useEffect(()=>{
     //获取节点切换主题颜色
     document.getElementById('switchTheme').className=isTheme?'dark-theme':'light-theme'
     //本地存储主题颜色
     localStorage.setItem('theme',isTheme?'dark':'light')
   },[isTheme])
   
  return (
    <div>
         <h1>切换主题颜色</h1>
        <Button onClick={()=>setIsTheme(!isTheme)} size="large" type='primary'>
            {isTheme?'🌛':'🌞'}
        </Button>
    </div>
  )
}

export default SwitchTheme
